<template>
  <div id="firstPage">
    <!-- 一级 -->
    <div class="statistical">
      <div class="left">
        <div class="top">
          <div class="blueBox colorBox">
            <div class="title">
              <h4>营收额</h4>
              <div class="digital">
                <p>1524316.00</p>
                <span>元</span>
              </div>
            </div>
            <div class="title2">
              <div class="leftBox">
                <div>1629.02<span>元</span></div>
                <span>本月营收额</span>
              </div>
              <div class="rightBox">
                <div>1629.02<span>元</span></div>
                <span>昨日营收额</span>
              </div>
            </div>
          </div>
          <div class="redBox colorBox">
            <div class="title">
              <h4>订单数量</h4>
              <div class="digital">
                <p>1524</p>
                <span>单</span>
              </div>
            </div>
            <div class="title2">
              <div class="leftBox">
                <div>221<span>单</span></div>
                <span>本月订单数</span>
              </div>
              <div class="rightBox">
                <div>12<span>单</span></div>
                <span>昨日订单数</span>
              </div>
            </div>
          </div>
          <div class="greenBox colorBox">
            <div class="title">
              <h4>用户数量</h4>
              <div class="digital">
                <p>{{ userCountAll }}</p>
                <span>人</span>
              </div>
            </div>
            <div class="title2">
              <div class="leftBox">
                <div>{{ userCountDay }}<span>人</span></div>
                <span>本月增长数量</span>
              </div>
              <div class="rightBox">
                <div>{{ userCountMonth }}<span>人</span></div>
                <span>昨日增长数量</span>
              </div>
            </div>
          </div>
        </div>
        <!-- 待办事项 -->
        <div class="bottom">
          <h5>代办事项</h5>
          <div class="MattersCharge">
            <div class="card" style="border-left: 5px solid rgb(88, 163, 247)">
              <div class="title">
                <h5><span>异常订单</span><span>(单)</span></h5>
              </div>
              <div class="content">
                <div>
                  <h4>80</h4>
                  <el-button type="primary">查看</el-button>
                </div>
              </div>
            </div>
            <div class="card" style="border-left: 5px solid rgb(223, 89, 134)">
              <div class="title">
                <h5><span>售后订单</span><span>(单)</span></h5>
              </div>
              <div class="content">
                <div>
                  <h4>80</h4>
                  <el-button type="primary">查看</el-button>
                </div>
              </div>
            </div>
            <div class="card" style="border-left: 5px solid rgb(223, 89, 134)">
              <div class="title">
                <h5><span>用户反馈</span><span>(条)</span></h5>
              </div>
              <div class="content">
                <div>
                  <h4>80</h4>
                  <el-button type="primary">查看</el-button>
                </div>
              </div>
            </div>
            <div class="card" style="border-left: 5px solid rgb(222, 168, 53)">
              <div class="title">
                <h5><span>巡检员反馈</span><span>(条)</span></h5>
              </div>
              <div class="content">
                <div>
                  <h4>80</h4>
                  <el-button type="primary">查看</el-button>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- 路段简报 -->
      <div class="right">
        <div class="title">
          <h5>路段简报</h5>
        </div>
        <div class="content">
          <el-table :data="state2.tableData4" border style="width: 99%">
            <el-table-column prop="roadName" label="路段名称" width="90" />
            <el-table-column prop="parkingCount" label="车位数量" width="90" />
            <el-table-column prop="inUse" label="使用中车位" width="100" />
            <!-- <el-table-column :prop="usage" label="车位使用率" width="95" /> -->
            <el-table-column prop="usage" label="车位使用率" width="95" />
            <el-table-column prop="orderCount" label="今日订单量" width="100" />
            <el-table-column prop="money" label="今日营收" width="100" />
          </el-table>
        </div>
      </div>
    </div>
    <!-- 二级 -->
    <div class="MarketingData">
      <!-- 标题 -->
      <div class="title">
        <h5>营销数据</h5>
      </div>
      <!-- 搜索烂 -->
      <div class="content">
        <div class="searchBox">
          <div class="leftBox" style="display: flex">
            <span style="font-size: 15px; margin-right: 10px">角色选择:</span>
            <el-select v-model="value1" disabled placeholder="请选择角色">
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
            <div class="demo-date-picker">
              <div
                class="block"
                style="display: flex; align-items: center; margin-right: 10px"
              >
                <p style="font-size: 15px; margin: 0 10px">时间选择：</p>
                <el-date-picker
                  v-model="value2"
                  type="daterange"
                  start-placeholder="开始日期"
                  end-placeholder="结束日期"
                  :default-time="defaultTime"
                />
              </div>
            </div>
            <div class="searchBtn">
              <el-button type="primary" @click="search">查询</el-button>
            </div>
          </div>
          <div class="rightBox" style="font-size: 15px">
            <span>本周</span>
            <span>本月</span>
            <span>上月</span>
          </div>
        </div>
      </div>
      <!-- 表格 -->
      <el-table
        :data="
          state1.tableData3.slice(
            (currentPage4 - 1) * pageSize4,
            currentPage4 * pageSize4
          )
        "
        border
        style="width: 99%; margin: 10px 5px"
      >
        <el-table-column prop="submissionTime" label="日期" width="180" />
        <el-table-column prop="dayOrderCounts" label="订单数量" width="180" />
        <el-table-column prop="dayOrderSum" label="营收额" />
        <el-table-column prop="dayUnOrderCount" label="退订订单" />
        <el-table-column prop="dayUnOrderSum" label="退订金额" />
        <el-table-column prop="userUpDay" label="用户增长" />
      </el-table>
      <!-- 分页 -->
      <el-pagination
        v-model:current-page="currentPage4"
        v-model:page-size="pageSize4"
        :page-sizes="[2, 3, 4, 5]"
        :page-count="pageCount"
        :small="small"
        :disabled="disabled"
        :background="background"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
    <!-- 三级 -->
    <div class="marketingView">
      <Thecharts :list = "state1.tableData3"></Thecharts>
    </div>
  </div>
</template>

<script lang="ts" setup>
import {
  ref,
  reactive,
  toRefs,
  onBeforeMount,
  onMounted,
  onBeforeUpdate,
  onUpdated,
} from "vue";
import Thecharts from "../components/Thecharts.vue";
import {
  countAll,
  orderCount,
  revenueAmount,
  dayOrderCount,
  findAllInformation,
  findRefundOrder,
} from "../http/api";
import { toRaw } from "@vue/reactivity";
import { stringifyQuery } from "vue-router";
import {watch} from 'vue'

onBeforeMount(() => {
  countAll()
    .then((res: any) => {
      if (res.code === 200) {
        console.log(res.data);
        userCountAll.value = res.data.userCountAll;
        userCountDay.value = res.data.userCountDay;
        userCountMonth.value = res.data.userCountMonth;
      }
    })
    .catch((err) => console.log(err));
  orderCount()
    .then((res: any) => {
      if (res.code === 200) {
        console.log("orderCount", res);
      }
    })
    .catch((err) => {
      console.log(err);
    });
  revenueAmount()
    .then((res: any) => {
      if (res.code === 200) {
        console.log(res);
      }
    })
    .catch((err) => {
      console.log(err);
    });
  dayOrderCount()
    .then((res: any) => {
      if (res.code === 200) {
        console.log("dayOrderCount", res.data);
        state1.tableData3 = res.data.list;
        console.log("营销数据", res);
        pageSize4.value = res.data.pageSize;
        total.value = res.data.total;
        pageCount.value = pageCount.value =
          res.data.list.length % pageSize4.value === 0
            ? res.data.list.length / pageSize4.value
            : res.data.list.length / pageSize4.value + 1;
            
     }
    })
    .catch((err) => {
      console.log(err);
    });
  findAllInformation()
    .then((res: any) => {
      if (res.code === 200) {
        console.log("findAllInformation", res.data);
        state2.tableData4 = res.data;
        for (let i in state2.tableData4) {
          console.log("2222", state2.tableData4[i].usage);
          for (let y in res.data) {
            console.log("333", res.data[y].usage);
            if ((i = y)) {
              state2.tableData4[i].usage =
                Math.floor(Number(String(res.data[y].usage).replace("%", ""))) +
                "%";
            }
          }
        }
        // let num =
        //   Math.floor(Number(String(res.data[0].usage).replace("%", ""))) + "%";
        // usage.value = num;
        // console.log("111", usage.value);
      }
    })
    .catch((err) => {
      console.log(err);
    });
  findRefundOrder()
    .then((res: any) => {
      if (res.code === 200) {
        console.log("findRefundOrder", res.data);
      }
    })
    .catch((err) => {
      console.log(err);
    });
});

let userCountAll = ref();
let userCountDay = ref();
let userCountMonth = ref();
let state1 = reactive({ tableData3: [] });
let state2 = reactive({ tableData4: [] });
let usage = ref<string>();

const value1 = ref("");
const value2 = ref("");
const options = [
  {
    value: "Option1",
    label: "Option1",
  },
];
const defaultTime = ref<[Date, Date]>([
  new Date(2000, 1, 1, 0, 0, 0),
  new Date(2000, 2, 1, 23, 59, 59),
]);
const search = () => {
  console.log(value2);
};
const currentPage4 = ref<number>(1);
const pageSize4 = ref<number>(0);
const total = ref<number>(0);
const pageCount = ref<number>(0);
const small = ref(false);
const disabled = ref(false);
const background = ref(false);
const handleSizeChange = (val: number) => {
  console.log(`${val} 条每页`);
  pageCount.value = Math.ceil(state1.tableData3.length / pageSize4.value);
};
const handleCurrentChange = (val: number) => {
  console.log(`当前页: ${val}`, currentPage4.value);
};
//echarts

</script>

<style lang="less">
* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}
#firstPage {
  display: flex;
  flex-direction: column;
  width: 1450px;
  padding: 20px;
  padding-right: 0;
  padding-bottom: 0;
  background-color: #fff;
}
.statistical {
  display: flex;
  width: 100%;
  height: 500px;
  & .left {
    width: 761px;
    & .top {
      display: flex;
      // justify-content: space-between;
      & .blueBox {
        background-color: rgba(88, 163, 247, 1);
      }
      & .redBox {
        background-color: rgba(223, 89, 134, 1);
      }
      & .greenBox {
        background-color: rgba(26, 188, 156, 1);
      }
      & .colorBox {
        width: 240px;
        height: 132px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        margin-left: 10px;
        color: #fff;
        & .title {
          border-bottom: 1px solid #fff;
          margin-bottom: 8px;
          & h4 {
            text-align: center;
          }
          & .digital {
            display: flex;
            justify-content: center;
          }
        }
        & .title2 {
          width: 100%;
          font-size: 15px;
          display: flex;
          & .leftBox {
            display: flex;
            align-items: center;
            flex-direction: column;
            flex: 1;
            border-right: 1px solid #fff;
          }
          & .rightBox {
            display: flex;
            align-items: center;
            flex-direction: column;
            flex: 1;
          }
        }
      }
    }
    & .bottom {
      display: flex;
      flex-direction: column;
      margin-top: 10px;
      & > h5 {
        display: flex;
        border-left: 4px solid rgb(0, 121, 254);
        padding-left: 10px;
      }
      & .MattersCharge {
        display: flex;
        // justify-content: space-between;
        flex-wrap: wrap;
        margin-top: 10px;
        & .card {
          width: 240px;
          height: 120px;
          padding-left: 30px;
          margin-bottom: 15px;
          margin-left: 10px;
          background-color: #fff;
          display: flex;
          flex-direction: column;
          justify-content: center;
          align-items: flex-start;
          box-shadow: 1px 5px 5px 0 rgba(0, 0, 0, 0.5);
          & .content > div {
            margin-top: 10px;
            display: flex;
            justify-content: center;
            & h4 {
              font-size: 30px;
            }
            & .el-button {
              margin-left: 60px;
            }
          }
        }
      }
    }
  }
  & .right {
    margin-left: 20px;
    margin-right: 5px;
    border-left: 4px solid rgb(222, 168, 53);
    padding: 0 2px 8px 5px;
    box-shadow: 2px 2px 5px;
    & .title {
      display: flex;
      margin-bottom: 15px;
      margin-top: 10px;
      border-left: 3px solid rgb(0, 121, 254);
      padding-left: 5px;
    }
    & .content {
    }
  }
}
//二级
.MarketingData {
  width: 100%;
  & .title {
    display: flex;
    border-left: 4px solid rgb(0, 121, 254);
    padding-left: 10px;
    margin: 20px 0 10px 0;
  }
  & .content {
    display: flex;
    padding: 0px 15px;
    & .searchBox {
      width: 100%;
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-left: 5px;
      & .rightBox {
        width: 150px;
        border: 1px solid rgb(167, 166, 166);
        border-radius: 20px;
        display: flex;
        justify-content: center;
        align-items: center;
        & span {
          flex: 1;
          text-align: center;
        }
        & span:hover {
          cursor: pointer;
        }
      }
    }
  }
  & .el-pagination {
    display: flex;
    justify-content: flex-end;
    margin-top: 10px;
  }
}
.marketingView {
  width: 100%;
  margin-top: 15px;
}
</style>